<template>
  <div class="trust-file">
    <div
      class="trust-file-item"
      @click="handlerTap(file)"
      v-for="(file, index) in fileList"
      :key="index">
      <img
        class="trust-file-img"
        :src="getImg(file.url)">
      <span
        class="trust-file-remove"
        @click.stop="handlerRemove(index)"
        v-if="!disabled"><i class="iconfont icon-close"></i></span>
    </div>
    <div
      class="trust-file-upload"
      v-if="!disabled">
      <span
        @click="onShowActionSheet"
        class="trust-file-input" />
      <div
        class="trust-file-btn">
        <i class="trust-file-camera trust-icon icon_camera"></i>
        <p class="trust-file-text">{{btnText}}</p>
      </div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  import browser from '../../browser.js'
  import service from '../../service.js'
  import { isImg } from '../../utils/isImg.js'
  import { isVideo } from '../../utils/isVideo.js'

  export default {
    name: 'File',
    inject: {
      ytForm: {
        default: () => ({})
      }
    },
    props: {
      /**
       * 设置最大值
       */
      max: {
        type: Number,
        default: 5
      },
      /**
       * 文件列表 例如 [{name, url}]
       */
      value: Array,
      /**
       *  是否禁用新增
       */
      disabled: {
        type: Boolean,
        default: false
      },
      acceptList: {
        type: Array,
        default: () => {
          return [
            {
              text: '照相'
            },
            {
              text: '拍摄'
            },
            {
              text: '语音'
            },
            {
              text: '文件'
            }
          ]
        }
      },
      uploadServer: {
        type: String,
        default: `${ window.CONFIG.apiServer }/api/base/attachment/upload`
      },
      uploadData: {},
      token: {}
    },
    computed: {
      btnText () {
        if (!this.fileList || this.fileList.length === 0) return '拍摄/文件'
        return `${this.fileList.length} / ${this.max}`
      },
      _disabled () {
        return this.disabled || (this.ytForm || {}).disabled
      },
      fileList: {
        get () {
          return this.value
        },
        set (val) {
          this.$emit('input', val)
        }
      }
    },
    methods: {
      onShowActionSheet () {
        if (this.fileList.length >= this.max) {
          service.message.error(`最多添加${this.max}个!`)
          return
        }
        service.actionSheet.show({
          list: [
            {
              text: '照相'
            },
            {
              text: '拍摄'
            },
            {
              text: '文件'
            }
          ],
          click: (item) => {
            const { text } = item
            const param = {
              uploadServer: this.uploadServer,
              token: this.token,
              data: this.uploadData
            }

            switch (text) {
              case '照相':
                browser.openCamera(param, (image) => {
                  this.onUpload(image)
                })
                break
              case '拍摄':
                browser.openVideo(param, (video) => {
                  this.onUpload(video)
                })
                break
              case '录音':
                browser.openAudio(param, (file) => {
                  this.onUpload(file)
                })
                break
              case '文件':
                browser.openFile(param, (file) => {
                  this.onUpload(file)
                })
                break
              default:
                browser.openFile(param, (file) => {
                  this.onUpload(file)
                })
                break
            }
          }
        })
      },
      handlerTap (file) {
        if (!file.url) {
          service.message.show('文件不存在')
        } else if (isImg(file.url)) {
          const images = [
            {
              url: file.url,
              props: {}
            }]
          browser.onImageView(images)
        } else if (isVideo(file.url)) {
          browser.playVideo(file.url)
        } else {
          this.$emit('onPreview', file)
        }
      },
      handlerToast () {
        if (this.fileList.length >= this.max) {
          service.message.error(`最多添加${this.max}个!`)
        }
      },
      handlerRemove (index) {
        if (this._disabled) return
        this.$emit('onDelete', this.fileList[index], () => {
          this.fileList.splice(index, 1)
        })
      },
      async onUpload(file) {
        const { id, name, url } = file
        this.fileList.push({ id, name, url })
      },
      getImg(url) {
        if(isImg(url)) {
          return url
        } else if (isVideo) {
          return require('./video.png')
        } else {
          return require('./video.png')
        }
      }
    }
  }
</script>

<style
  lang="stylus"
  rel="stylesheet/stylus"
  type="text/stylus">
  .trust-file
    padding: 0 5px
    font-size: 0

    &-item, &-upload
      position: relative
      display: inline-block
      width: 33.33%
      padding-bottom: 33.33%
      height: 0
      vertical-align: middle

    &-img
      position: absolute
      top: 0
      left: 0
      padding: 5px
      box-sizing: border-box
      width: 100%
      height: 100%

    &-remove
      display: inline-block
      position: absolute
      top: -3px
      right: 0
      width 15px;
      height 15px;
      color: #fff
      background-color: #000
      border-radius: 50%
      display: flex;
      justify-content: center;
      align-items: center;
      i
        position: relative
        top: 0px
        font-size: 12px
        font-weight: bold

    &-input
      position: absolute
      top: 0
      left: 0
      width: 100%
      height: 100%
      z-index: 100
      opacity: 0

    &-btn
      position: absolute
      top: 5px
      left: 5px
      right: 5px
      bottom: 5px
      box-sizing: border-box
      display: flex
      vertical-align: middle
      flex-direction: column
      align-items: center
      justify-content: center
      border: 1px dashed #cccccc

    &-camera
      font-size: 48px
      color: #bcbbcb

    &-text
      margin-top: 6px
      color: #bcbbcb
      font-size: 14px
</style>
